<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
  <script src="./lib/vue-2.5.9.js"></script>
  <script src="./lib/axios-v0.17.1.js"></script>
  <script src="./baseConfig.js"></script>
</head>

<body>
  <div id="app">



    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加新品牌</h3>
      </div>
      <div class="panel-body form-inline">

        <div class="form-group">
          <label>品牌名称：</label>
          <input type="text" class="form-control" v-model="name">
        </div>

        <div class="form-group">
          <input type="button" value="添加" class="btn btn-primary" @click="add">
        </div>

      </div>
    </div>



    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>CTime</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.ctime }}</td>
          <td>
            <a href="#" @click.prevent="del(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>


  </div>

  <script>
    /* axios.defaults.baseURL = 'http://39.106.32.91:3000';
    Vue.prototype.$http = axios */

    /* //  注意：   axios.create() 方法，调用的返回值，是一个新的 axios 实例，在 调用 create 函数的时候，可以初始化一些默认配置项，比如，请求的 baseURL 地址
    Vue.prototype.$http = axios.create({
      baseURL: 'http://39.106.32.91:3000'
    }) */



    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [], // 所有品牌列表的数组
        name: '' // 添加新品牌的名称
      },
      created() { // 这是生命周期函数  创建阶段的第二个钩子函数
        this.getList()
      },
      methods: {
        async getList() { // 获取数据列表
          const { data } = await this.$http.get('/api/getprodlist')
          // 如果数据请求成功，则把 数据结果，挂载到 data 上，供页面去使用
          if (data.status === 0) this.list = data.message
        },

        async add() { // 点击添加新品牌
          if (this.name.trim().length <= 0) return alert('品牌名称不能为空！')

          const { data } = await this.$http.post('/api/addproduct', { name: this.name.trim() })

          // 如果添加成功，则重新调用 获取数据的方法
          if (data.status === 0) this.getList()
        },

        async del(id) { // 根据Id删除品牌
          const { data } = await this.$http.get('/api/delproduct/' + id)
          // 当删除OK，重新刷新列表
          if (data.status === 0) this.getList()
        }
      }
    });
  </script>
</body>

</html>